<template>
	<view>
		<cu-custom bgColor="bg-black-two" :isBack="false">
			<block slot="content">报表</block>
		</cu-custom>
		<view class="flex justify-center"  v-if="moduleLockList.baobiao1.status">
			<view class="padding title-text-selected">统计</view>
			<view @click="linktoPage('/pages/report/report-day')" 
				class="padding title-text">
				<text>日报表</text>
			</view>			
		</view>
		
		<view class="my-bg">
			<view v-if="!moduleLockList.baobiao1.status" class="title-text" style="margin: 0px 0px 5px;">总统计</view>
			<view class="flex justify-between">
				<view>
					<view class="flex radius" @click="openStart" style="border: 1px solid #00A99D;padding: 5px;">
						<view  class="uni-input text-gray" style="padding-right: 5px;">开始</view>
						<view class="uni-input" style="color: #fff;padding:2px 10px 0px 0px;">{{startDate}}</view>
						<view class="uni-input" style="text-align: right;border-radius: 5px;">
							<text class="cuIcon-unfold"
								style="color: #00A99D;font-size: 15px; font-weight: bold;"></text>
						</view>
					</view>
				    <uni-calendar ref="calendarStart" :insert="false" @confirm="confirmStart" :date="startDate"/>
				</view>
				<view>
					<view>
						<view class="flex radius" @click="openEnd" style="border: 1px solid #00A99D;padding: 5px;">
							<view  class="uni-input text-gray" style="padding-right: 5px;">结束</view>
							<view class="uni-input" style="color: #fff;padding:2px 10px 0px 0px;">{{endDate}}</view>
							<view class="uni-input" style="text-align: right;border-radius: 5px;">
								<text class="cuIcon-unfold"
									style="color: #00A99D;font-size: 15px; font-weight: bold;"></text>
							</view>
						</view>
					    <uni-calendar ref="calendarEnd" :insert="false" @confirm="confirmEnd" :date="endDate"/>
					</view>
				</view>
			</view>

			<view>
				<view class="grid margin-bottom text-center col-3" style="padding-top: 10px;">
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_energy | nullzhuanzero}}</view>
						<view class="text-gray">能耗/kwh</view>
					</view>
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_output | nullzhuanzero}}</view>
						<view class="text-gray">产量/件</view>
					</view>
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_weight | nullzhuanzero}}</view>
						<view class="text-gray">产重/kg</view>
					</view>
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_run | nullzhuanzero}}</view>
						<view class="text-gray">运行时长/h</view>
					</view>
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_wait | nullzhuanzero}}</view>
						<view class="text-gray">待机时长/h</view>
					</view>
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_alarm | nullzhuanzero}}</view>
						<view class="text-gray">报警时长/h</view>
					</view>
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_consume | nullzhuanzero}}</view>
						<view class="text-gray">耗材/个</view>
						<!-- <view class="text-green margin-tb-xs">耗材详情>></view> -->
					</view>
					<view class="padding" style="padding: 13px;">
						<view class="text-xxl text-white">{{sum_consume_money}}</view>
						<view class="text-gray">耗材费用/元</view>
					</view>
				</view>
			</view>
			<view class="text-xxl text-right" style="display:none;border-top: 1px solid #828285;margin: 0px -15px 0px;padding: 15px 15px 0px;">
				<!-- 下载 -->
				<text @click="appDown" :class="'cuIcon-' + 'down'" 
					style="color: #23CE9A;font-weight: bold;padding-right: 10px;"></text>
				<!-- 分享 -->
				<text @click="uniShare"  :class="'cuIcon-' + 'share'" style="color: #FE6B01;font-weight: bold;"></text>
			</view>
		</view>
		
		<view class="my-bg" v-if="!moduleLockList.baobiao1.status">
			<view class="title-text" style="margin: 0px 0px 5px;">日报表</view>
			<view class=" lockParent" style="height: 200px;">
				<!-- 判断模块是否解锁 0：加锁，1：解锁 -->
				<view 
					@click="showModal('DialogModal1',moduleLockList.baobiao1)"
					class="lockView">
					<image src="@/static/image/lock.png" mode='aspectFit'></image>
					<view class="locktext">
						解锁此模块提高生产效率
					</view>
				</view>
			</view>
		</view>
		
		<!-- 购买模块 模态框 -->
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog bg-white" style="border-radius: 13px;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two">解锁模块</view>
				</view>
				<view class="margin-bottom-sm">
					<view>
						<image mode='widthFix' src="@/static/image/unLock.png" class="tip-img"></image>
					</view>
					<view>
						<text style="color: #00A99D;font-size: 30px;">{{modulePrice}}</text>
						<text class="text-gray padding-left-xs" style="font-size: 14px;">元</text>
					</view>
					<view class="text-gray" style="font-size: 15px;">
						您确认开通此模块？
					</view>
				</view>
				<view class="cu-bar padding-bottom-sm" style="height: 80px;">
					<view class="action margin-0 flex-sub text-green" @tap="hideModal">
						<button class="cu-btn round lines-green-two padding-lr-lg" style="width: 90%;height: 45px;">
							<text class="text-gray">取消</text>
						</button>
					</view>
					<view class="action margin-0 flex-sub">
						<button  @click="showModalInvoice('fapiaoTip')" class="cu-btn round bg-green-two padding-lr-lg" style="width: 90%;height: 45px;">确认去开票</button>
					</view>
				</view>
			</view>
		</view>		
		<!-- 发票过渡提醒框 -->
		<view class="cu-modal" :class="modalName=='fapiaoTip'?'show':''">
			<view class="cu-dialog bg-white" style="border-radius: 13px;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two">发票提醒</view>
				</view>
				<view class="margin-bottom-sm">
					<view>
						<image src="@/static/image/fapiao-tip.png"  mode='widthFix' class="tip-img"></image>
					</view>
					<view class="text-black-two padding-top-sm" style="font-size: 15px;">
						感谢您信任并使用我司开发的产品！
						<br/>
						我司的电子发票统一采取国家税务局
						<br/>
						认证的电子普票。
					</view>
				</view>
				<view class="cu-bar padding-bottom-sm" style="justify-content: center;height: 80px;">
					<view><image src="@/static/image/fapiao-gif.gif" style="width: 64px;height: 64px;"></image></view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white" style="height: 100px;width: 80%;">
				<view class="cu-bar justify-end">
					<view class="content text-black-two" style="font-size: 14px;">提示</view>
				</view>
				<!-- 提示3：橙色 #ff5722  错误2：红色 red   正确1：绿色 #00A99D  -->
				<view v-if="tipFlag == 3" class="text-black-two" style="font-size: 16px;color: #ff5722;">
					{{resText}}
				</view>
				<view v-else-if="tipFlag == 2" class="text-black-two" style="font-size: 16px;color: red;">
					{{resText}}
				</view>
				<view v-else="tipFlag == 1" class="text-black-two" style="font-size: 16px;color: #00A99D;">
					{{resText}}
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	import {getNowDate,getNowTime} from '@/common/util.js'
	var _self;
	export default{
		data(){
			return{
				startDate:'',
				endDate:'',
				sum_energy:0,//能耗
				sum_output:0,//产量
				sum_weight:0,//产重
				sum_run:0,//运行时长
				sum_wait:0,//待机时长
				sum_alarm:0,//报警时长
				sum_consume:0,//耗材数量
				sum_consume_money:0,//耗材费用
				//模块加锁
				moduleLockList:[],//模块列表
				modalName:null,//弹出是否解锁模块的模态框
				modulePrice:0,//模块价格
				buyModuleInfo:[],//购买当前模块的模块信息
				resText:'',
				tipFlag:0,//提示flag(1:正确，2：错误，3：提示)
			}
		},
		onShow() {
			_self = this;
			var dateTime = new Date();
			dateTime = dateTime.setDate(dateTime.getDate() - 1);
			dateTime = new Date(dateTime);
			this.startDate = this.dateFormat(dateTime);//开始日期：默认为当前日期减1天
			this.endDate = getNowDate();//结束日期：默认为当前日期
			//获取模块购买列表
			this.getModelLockData();
			this.getInitData();
		},				
		//过滤器
		filters: {
			nullzhuanzero(msg) {
				return null == msg ? 0 : msg;
			},
		},
		methods:{
			//获取模块列表，判断是否购买，未购买则加锁
			async getModelLockData(){
				// position =>  1:首页，2:设备，3:能耗，4:报表
				let [err,res] = await this.$http.post('getModelList',{position:4},{
					token:true,
					checkToken:true ,
				});
				//status：0（加锁），1：解锁
				this.moduleLockList = res.data.data;
			},
			//获取数据源
			async getInitData(){
				uni.showLoading({title:'加载中...',mask:true});
				//请求
				let [err,res] = await this.$http.post('getReportTotalData',{startDate:this.startDate,endDate:this.endDate},{token:true,checkToken:true});
				uni.hideLoading();
				console.log(res);
				this.sum_energy = res.data.data.sum_energy;//能耗
				this.sum_output = res.data.data.sum_output;//产量
				this.sum_weight = res.data.data.sum_weight;//产重
				this.sum_run = res.data.data.sum_run;//运行时长
				this.sum_wait = res.data.data.sum_wait;//待机时长
				this.sum_alarm = res.data.data.sum_alarm;//报警时长
				this.sum_consume = res.data.data.sum_consume;//耗材数量
				this.sum_consume_money = res.data.data.sum_consume_money;///耗材费用
			},
			//跳转页面
			linktoPage(urlStr){
				uni.navigateTo({
					url:urlStr
				})
			},
			//打开日历
			openStart() {
				this.$refs.calendarStart.open()
			},
			openEnd() {
				this.$refs.calendarEnd.open()
			},
			confirmStart(e) {
				this.startDate = e.fulldate;
				this.getInitData();
				console.log('confirm 返回start:', e)
			},
			confirmEnd(e) {
				this.endDate = e.fulldate;
				this.getInitData();
				console.log('confirm 返回end:', e)
			},
			close() {
				console.log('弹窗关闭');
			},
			
			//打开模态框
			showModal(name,data=null){
				this.modalName=name
				this.buyModuleInfo = data;//购买该模块的信息
				this.modulePrice = data.module_price;//购买该模块的价格
			},
			//隐藏模态框
			hideModal(e) {
				this.modalName = null
			},
			
			//打开模态框
			showModalTip(val,isflag){
				this.modalName='Modal';
				this.resText = val;
				this.tipFlag = isflag;
			},
			//隐藏模态框
			hideModalTip(e) {
				this.modalName = null
				this.resText = '';
			},
			//发票过渡
			showModalInvoice(name){
				//获取当前登录用户实时余额
				let currentYue = uni.getStorageSync("userinfo").money;
				console.log(currentYue);
				//获取用户余额，判断余额是否足够
				if (parseInt(currentYue) >= parseInt(this.modulePrice)) {
					//余额足够跳转到发票页
					this.modalName=name;
					setTimeout(function () {
						_self.modalName = null
						_self.buyModule();
					},3000);
				} else {
					//余额不足提示请充值，跳转到余额充值页
					this.showModalTip('余额不足请充值',3);
					setTimeout(function () {
						_self.hideModalTip();
						uni.navigateTo({
							url:'/pages/center/yue/yue',
						})
					}, 2000);
				}
			},
			//确认购买模块跳转到发票页
			buyModule(){
				//购买该模块的信息
				let data = JSON.stringify(this.buyModuleInfo);
				uni.navigateTo({
					url:'/pages/center/fapiao/buy-module-fapiao?moduleInfo='+data,
				})	
			},
			dateFormat(dateData) {
			    var date = new Date(dateData)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? ('0' + m) : m
			    var d = date.getDate()
			    d = d < 10 ? ('0' + d) : d
			    const time = y + '-' + m + '-' + d
			    return time
			},
		}
	}
</script>

<style>
	.aa {
		width: 92%;
		height: 270px;
		background: #393948de;
		border-radius: 20px;
		margin-left:15px;
		position: absolute;
	}
	
	.aa image {
		width: 150px;
		height: 150px;
		position: absolute;
		top: 20%;
		left: 29%;
	}
</style>